<template>
    <div class="home">
        <!-- 推荐歌单 -->
        <h2 class="title">推荐歌单</h2>
        <van-row gutter='6'>
            <van-col v-for="obj in recommendList" :key="obj.id" span="8">
                <van-image width="100%" height="3rem" fit="cover" :src="obj.picUrl" />
                <p class="song_name">{{obj.name}}</p>
            </van-col>
        </van-row>


        <!-- 最新音乐 -->
        <h2 class="title">最新音乐</h2>
        <songitem v-for="obj in SongList" :key="obj.id" :songname="obj.name" :songId="obj.id"
            :singename="miaoshu(obj)" />
    </div>
</template>

<script>
    import {
        getRecommendListAPI,
        getSongListAPI
    } from '@/api'
    import songitem from '@/components/songitem.vue'
    export default {
        components: {
            songitem

        },
        data() {
            return {
                recommendList: [],
                SongList: []
            }
        },
        methods: {
            miaoshu(obj) {
                return obj.song.artists[0].name + ' - ' + obj.name
            }
        },

        created() {
            getRecommendListAPI({
                    limit: 9
                })
                .then(resp => {
                    this.recommendList = resp.data.result
                }).catch(e => {
                    console.log(e);
                })
            getSongListAPI({
                    limit: 9
                })
                .then(resp => {
                    this.SongList = resp.data.result
                }).catch(e => {
                    console.log(e);
                })
        }
    }
</script>

<style>
    /* 标题 */
    .title {
        padding: 0.266667rem 0.24rem;
        margin: 0 0 0.24rem 0;
        background-color: #eee;
        color: #333;
        font-size: 15px;
    }

    /* 推荐歌单 - 歌名 */
    .song_name {
        font-size: 0.346667rem;
        padding: 0 0.08rem;
        margin-bottom: 0.266667rem;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical;
        /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2;
        /** 显示的行数 **/
        overflow: hidden;
        /** 隐藏超出的内容 **/
    }
</style>